<template>
  <view class="container">
    <view class="head" :style="'height:'+headHeight+'px'">
      <view class="back" :style="'margin-top:'+(statusHeight+bottonMargin)+'px'" @click="goback">
        <IconFont name="rect-left" size="36rpx"></IconFont>
      </view>
      <view class="title" :style="'margin-top:'+statusHeight+'px'">电子承运单</view>
    </view>
    <view class="top_nav">
      <view class="outlet"></view>
      <view class="success_info">
        <IconFont name="success" size="56rpx"></IconFont>
        <text class="text">您的承运单已生成</text>
      </view>
    </view>
    <view class="bill_box">
      <view class="top"></view>
      <bill-of-lading  ref="childBill" :billData="{}" :type="'2'" />
    </view>
    <view style="height: 1rpx"></view>
    <view class="bottom_btns">
      <view class="left_btn" @click="saveCanvas(0)">分享给朋友</view>
      <view class="right_btn" @click="saveCanvas(1)">保存到相册</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, onMounted } from 'vue';
import Taro from "@tarojs/taro";
import { yueding } from './tebieyueding.ts'
import billOfLading from '@/components/sign/billOfLading.vue'
import { IconFont } from '@nutui/icons-vue-taro';

const headHeight = ref(0)
const statusHeight = ref(0)
const bottonMargin = ref(0)
const childBill = ref();

const getNavHeight = ()=>{
  let menuButtonObject = Taro.getMenuButtonBoundingClientRect(); //获取胶囊对象
  let sysinfo = Taro.getSystemInfoSync(); // 获取设备系统对象
  let statusBarHeight = sysinfo.statusBarHeight; // 获取状态栏高度
  let menuBottonHeight =  menuButtonObject.height; //获取胶囊本身高度
  let menuBottonTop =  menuButtonObject.top; // 获取胶囊距离顶部的高度
  headHeight.value = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2 ; //计算nav导航栏的高度（上图蓝色线段的长度）
  statusHeight.value = statusBarHeight
  bottonMargin.value = menuBottonTop - statusBarHeight
}
const goback = () => {
  Taro.navigateBack()
}

getNavHeight()
const saveCanvas=(e)=>{
  console.log(childBill.value,"childBill.value");
  childBill.value.makeCanvas(e)
}

</script>

<style lang="scss" >
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
}
.head {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  background-color: #0966ff;
  display: flex;
  align-items: center;
  justify-content: center;
  .back {
    position: absolute;
    left: 34rpx;
    color: #fff;
  }
  .title {
    font-size: 34rpx;
    color: #fff;
  }
}

.top_nav {
  background: url("../../assets/images/sign/bill_nav.png") no-repeat;
  background-color: #0966ff;
  background-size: cover;
  background-position: bottom center;
  width: 100%;
  height: 472rpx;
  border-bottom-left-radius: 100rpx 24rpx;
  border-bottom-right-radius: 100rpx 24rpx;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: relative;
  z-index: -1;
  .success_info {
    width: 100%;
    text-align: center;
    color: #fff;
    margin-bottom: 64rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      font-size: 44rpx;
      font-weight: 600;
      line-height: 56rpx;
      margin-left: 20rpx;
    }
  }
  .outlet {
    width: calc(100% - 50rpx);
    height: 30rpx;
    box-sizing: border-box;
    border: 6rpx solid #4189ff;
    background-color: #003081;
    margin-bottom: 70rpx;
    border-radius: 15rpx;
  }
}
.bill_box {
  width: 700rpx;
  margin-left: 25rpx;
  margin-top: -85rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 152rpx;
  .top {
    width: 100%;
    height: 40rpx;
    background: linear-gradient(180deg, #0644AC -3%, #0966FF 100%);
  }
}
.bottom_btns {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  .left_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #252525;
    background-color: #fff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    border: 1rpx solid #c4c4c4;
  }
  .right_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #fff;
    background-color: #0966ff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
  }
}
</style>
